# 코드 하이라이트 예제

- `shiki` 기반 구문 강조
  - Transformer 사용: 단어/라인 하이라이트, 경고/에러 표시, 라인 번호 자동 표시
  - 테마 적용 가능
- `Monaco Editor` 기반 코드 편집
- `JSX` 기반 하이라이트: 서버에서 초기 렌더링 & 클라이언트에서 동적 업데이트
- `HTML` 기반 하이라이트: 서버 컴포넌트 전용 - 코드를 HTML로 변환
- `MDX` 통합: 마크다운 내 코드 블록 자동 하이라이트
- `Monaco Editor` 기반 코드 에디터 구현
- 파일시스템 기반 패널 구현
  - 컴포넌트 렌더링 포함/미포함 선택 가능
  - 실시간 코드 편집
  - 코드 하이라이트 미리보기
  - 코드 복사 커멘드 기능
  - 사용중인 에디터로 열기 (e.g. Cursor, VSCode, WebStorm)
